    // 接口文档：https://www.showdoc.com.cn/1834761734600444/8477923164668939

    // 功能列表
    // 功能1: 上传头像
    // 功能2: 页面初始化: 获取个人信息，并渲染到页面中
    // 功能3: 省市区的联动效果
    // 功能4: 保存个人信息，刷新页面，可以看到自己保存的个人信息
    //        说明：由于接口提供的是相同账号下的个人信息，所以当大家都在练习的时候，会出现互相覆盖的情况

    // 要求： 
    // 1. 使用 axios 发送请求
    // 2. 设置 axios 请求根路径
    // 3. 配合 async await 完成功能


    // 封装 获取元素对象 函数
    const qs = ele => document.querySelector(ele)

    // 配置 axios 请求根路径
    axios.defaults.baseURL = 'http://ajax-api.itheima.net'
   

    //!    上传头像
    qs('img').addEventListener('click', () => {
        // 模拟点击
         qs('#upload').click() 
    })

    qs('#upload').addEventListener('change',async function(){
           const file = this.files[0]
           console.log(file);

        //判断用户是否选择了图片上传
        if(!file) return alert('请选择图片上传')

        // 准备接口要求的参数
        const fd = new FormData()
        fd.append('avatar', file)

        const {data:{data:{url}}} = await axios.post('/api/file',fd)
        console.log(url);
        //渲染图片
        qs('img').src = url

    })



    // ! 省市联动
   async function fn() {
        //todo    渲染 省 逻辑
        const {data: {data:re1}} = await axios({url: '/api/province'})  
        // console.log(re1);

        const provinceStr = re1.map(item => `<option value="${item}">${item}</option>`).join('')
        // 渲染数据
        qs('[name=province]').innerHTML = '<option value="">--省--</option>' + provinceStr


         //todo  =====  获取个人信息模块
         const {data:{data}} = await axios.get('/api/settings')
        //  console.log(data);
     
         // 用户昵称
         qs('[name=nickname]').value = data.nickname
         // 图片
         qs('img').src = data.avatar
        //  省
         qs('[name=province]').value = data.province




        //todo    渲染 城市 逻辑
        const {data:{data:re2}} = await axios({
            url: '/api/city',
            params: {
                pname: data.province
            }
        })  
        // console.log(re2);

        const cityStr = re2.map(item => `<option value="${item}">${item}</option>`).join('')
        // 渲染数据
        qs('[name=city]').innerHTML = '<option value="">--市--</option>' + cityStr


        // 获得市的值
        qs('[name=city]').value = data.city


       

         //todo    渲染 区县 逻辑
         const {data:{data:re3}} = await axios({
            url: '/api/area',
            params: {
                pname: data.province,
                cname: data.city
            }
        })  
        // console.log(re3);

        const areaStr = re3.map(item => `<option value="${item}">${item}</option>`).join('')
        // 渲染数据
        qs('[name=area]').innerHTML = '<option value="">--区--</option>' + areaStr


        // 获得区县的值
        qs('[name=area]').value = data.area

    }

    fn()


    // todo   省份 发生变化影响 城市 数据发生变化     change
    qs('[name=province]').addEventListener('change', async function(){
          console.log(this.value);

        const {data:{data:re2}} = await axios({
            url: '/api/city',
            params: {
                pname: this.value
            }
        })  
        // console.log(re2);

        const cityStr = re2.map(item => `<option value="${item}">${item}</option>`).join('')
        // 渲染数据
        qs('[name=city]').innerHTML = '<option value="">--市--</option>' + cityStr
    })


    // todo   城市 发生变化影响 区县 数据发生变化     change
    qs('[name=city]').addEventListener('change', async function(){
        const {data:{data:re3}} = await axios({
            url: '/api/area',
            params: {
                pname: qs('[name=province]').value,
                cname: this.value
            }
        })  

        const areaStr = re3.map(item => `<option value="${item}">${item}</option>`).join('')
        // 渲染数据
        qs('[name=area]').innerHTML = '<option value="">--区--</option>' + areaStr
    })



    // !  保存功能
  qs('form').addEventListener('submit', async function(e){
    // 阻止表单默认提交 
    e.preventDefault()

      const {data} = await axios({
        method: 'PUT',
        url: '/api/settings',
        data: {
            nickname: qs('[name=nickname]').value,
            province: qs('[name=province]').value,
            city: qs('[name=city]').value,
            area: qs('[name=area]').value,
            avatar: qs('img').src
         }
      })
    //   console.log(data);
    alert(data.message)
  })










// 获取个人信息模块
// async function getUse() {
//     const {data:{data}} = await axios.get('/api/settings')
//     console.log(data);

//     // 用户昵称
//     qs('[name=nickname]').value = data.nickname
//     // 图片
//     qs('img').src = data.avatar

//     // qs('[name=province]').innerHTML = `<option value="">${data.province}</option>`
// }

// getUse()


   

   






